<template>
  <view class="container">
    <view class="common-view">
      <uni-data-picker
        placeholder="请选择点位"
        popup-title="请选择所在地区"
        :localdata="dataTree"
        v-model="classes"
        @change="onchange"
        @nodeclick="onnodeclick"
        @popupopened="onpopupopened"
        @popupclosed="onpopupclosed"
      >
      </uni-data-picker>
    </view>

    <div class="space"></div>

    <view class="common-view" v-if="cameraList.length > 0">
      <uni-list :border="false">
        <uni-list-item
          v-for="item in cameraList"
          :key="item.id"
          clickable
          :disabled="false"
          :title="item.equipmentName"
          note="点击查看摄像头"
          link="navigateTo"
          :to="'/pages/monitor/video?equipmentCode=' + item.equipmentCode"
          time="2020-02-02 20:20"
        ></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { HOST } from "../../static/js/const";

let classes = ref("");
let dataTree = ref([]);
let cameraList = ref([]);

function transformData(data) {
  return data.map((item) => {
    const { id, parentId, name, children } = item;
    const value = id;
    const text = name;

    const transformedItem = {
      text,
      value,
    };

    if (children && children.length > 0) {
      transformedItem.children = transformData(children);
    }

    return transformedItem;
  });
}

async function onnodeclick(e) {
  console.log("onnodeclick");
  console.log(e);
  if (!e.children) {
    uni.request({
      url: `${HOST}/monitor/tCameraInfo/pageSearch`,
      method: "POST",
      data: {
        data: {
          jurisdictionalCode: e.value,
        },
      },
      header: {
        "content-type": "application/json",
        Authorization: "Bearer " + uni.getStorageSync("accessToken"),
      },
      success: (res) => {
        if (res.data.status === "OK" && res.data.flag) {
          cameraList.value = res["data"]["data"]["records"];
        } else if (Number(res.data.code) === 401) {
          uni.showToast({
            title: "登录超时",
            icon: "error",
          });
          uni.removeStorageSync("accessToken");
          uni.reLaunch({
            url: "/pages/login/index", // 这里的URL是登录页面的路径
          });
        } else {
          uni.showToast({
            title: res.data.message,
            icon: "error",
          });
        }
      },
      fail: (err) => {
        console.error("请求失败", err);
        uni.showToast({
          title: "连接失败",
          icon: "error",
        });
      },
    });
  }
}

function onpopupopened(e) {
  console.log("popupopened");
}

function onpopupclosed(e) {
  cameraList.value = [];
}

function onchange(e) {
  if (e.detail.value.length === 0) {
    cameraList.value = [];
  }
}

onShow(() => {
  uni.request({
    url: `${HOST}/alarm/tDevicePoint/treeStructure`,
    method: "GET",
    header: {
      "content-type": "application/json",
      Authorization: "Bearer " + uni.getStorageSync("accessToken"),
    },
    success: (res) => {
      if (res.data.status === "OK" && res.data.flag) {
        dataTree.value = transformData(res.data.data);
        console.log("dataTree.value");
        console.log(dataTree.value);
      } else if (Number(res.data.code) === 401) {
        uni.showToast({
          title: "登录超时",
          icon: "error",
        });
        uni.removeStorageSync("accessToken");
        uni.reLaunch({
          url: "/pages/login/index", // 这里的URL是登录页面的路径
        });
      } else {
        uni.showToast({
          title: res.data.message,
          icon: "error",
        });
      }
    },
    fail: (err) => {
      console.error("请求失败", err);
      uni.showToast({
        title: "连接失败",
        icon: "error",
      });
    },
  });
});
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  padding: 0 $myuni-spacing-super-lg;
  // background: #D4ECFF;
  background: linear-gradient(to bottom, #d8ecff, #e3e9f4, #cadbf7);
  // background-color: #d8ecff;
  overflow: auto;
}

.common-view {
  font-size: $myuni-font-size-base !important;
}

.common-view::v-deep .input-value-border {
  // border: 1px solid $myuni-bg-color-grey !important;
  border: 0 !important;
}

.common-view::v-deep .placeholder {
  font-size: $myuni-font-size-lg;
}

.common-view::v-deep .input-value {
  font-size: $myuni-font-size-lg;
}

.data-pickerview {
  border: 1px #e5e5e5 solid;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.monitor-video {
  z-index: -1 !important;
}

.uni-video-container {
  z-index: -1 !important;
}
</style>
